<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>MeteoCal Home</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">

            <!-- NORTHERN LAYOUT UNIT -->
            <p:layoutUnit position="north" size="60" >

                <!-- Search for a user -->
                <h:form id="form">
                    <div style="position:absolute;top:8px;left:35px;">   
                        <h:panelGroup id="AutoAndWatermark">
                            <p:autoComplete id="searchUserHome" value="#{SearchUserBean.selectedUser}"
                                            completeMethod="#{SearchUserBean.completeUsers}"  
                                            var="user" 
                                            itemLabel="#{user.username}" itemValue="#{user}" 
                                            converter="userConverter"
                                            onchange="#{SearchUserBean.selectedUser};"
                                            cache="true"                
                                            size="50"
                                            emptyMessage="No users to suggest.">     
                                <p:ajax event="itemSelect" update=":userdlg" oncomplete="PF('srcUserDialog').show();"/>      
                                <p:column style="height:20px;text-align:center;background-color: #f3f3e9;color:#000066;text-shadow: none">
                                    #{user.username} - #{user.email} 
                                </p:column>
                            </p:autoComplete>
                            <p:watermark id="wm" for="searchUserHome" value="Search by username" />
                        </h:panelGroup>
                    </div>
                </h:form>

                <p:dialog id="userdlg" widgetVar="srcUserDialog" header="#{SearchUserBean.selectedUser.username}'s profile info" resizable="false"  
                          showEffect="clip" hideEffect="clip" appendTo="@(body)" 
                          style="background-color:aliceblue;te" width="330" height="350" >
                    <div align="center">
                        <p:graphicImage value="/images/user-icon.png" style="width:150px;height:150px"/>
                    </div>
                    <h:form>

                        <p:panel id="userDetails" style="width:260px" >
                            <div>
                                <h:outputText value="Username: " style="font-family:calibri;font-weight:bold;color:#000066;font-size:20px;"/>
                                <h:outputText value="#{SearchUserBean.selectedUser.username}" style="font-family:calibri;color:#000066;font-size:20px;" />       
                            </div>
                            <div>
                                <h:outputText value="Email: " style="font-family:calibri;font-weight:bold;color:#000066;font-size:20px;"/>
                                <h:outputText  value="#{SearchUserBean.selectedUser.email}" style="font-family:calibri;color:#000066;font-size:20px;"/> 
                            </div>
                        </p:panel>
                        <br/>
                        <!-- <h:panelGrid id="fields" columns="2">-->
                        <h:outputText value="#{SearchUserBean.selectedUser.username}'s calendar is " rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'private'}"
                                      style="font-family:calibri;color:#000066"/>
                        <h:outputText value="private.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                      &nbsp;&nbsp;&nbsp;" rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'private'}"
                                      style="font-family:calibri;font-weight:bold;color:#000066"/>
                        <p:graphicImage value="/images/lock.png" style="width:35px;height:35px" 
                                        rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'private'}"/>

                        <h:outputText value="#{SearchUserBean.selectedUser.username}'s calendar is " rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"
                                      style="font-family:calibri;color:#000066"/>
                        <h:outputText value="public.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                      &nbsp;&nbsp;&nbsp;&nbsp;" rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"
                                      style="font-family:calibri;font-weight:bold;color:#000066"/>
                        <p:graphicImage value="/images/unlock.png" style="width:23px;height:30px"
                                        rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"/>               

                        <!--</h:panelGrid>-->
                        <br/><br/>
                        <p:button id="showCal" value="Show calendar" outcome="otherUserCalendar" onclick="#{OtherCalendarBean.init()}"
                                  rendered="#{SearchUserBean.selectedUser.calendarVisibility eq 'public'}"
                                  style="font-family:calibri;color:#000066;font-size:19px;width:180px;height:35px"/>            
                    </h:form>
                </p:dialog>

                <!-- Notifications -->
                <p:commandButton id="notif" value="Show notifications" icon="ui-icon-star" update=":f:ds" oncomplete="PF('notifDialog').show();" 
                                 style="width:230px;height:35px;font-family:calibri;color:#000066;font-size:18px;position:absolute;top:8px;left:700px;"/>
                <h:outputText value="N notifications unread!" style="font-family:calibri;font-style:italic;color: #cc0000;font-size:15px; position:absolute;top:15px;left:940px"/>

                <p:dialog id="notifdlg" widgetVar="notifDialog" header="Notifications panel" resizable="false"  
                          showEffect="drop" hideEffect="clip" appendTo="@(body)" 
                          style="background-color:aliceblue;" width="550" height="380" >                   
                    <h:form id="f">
                        <p:dataScroller id="ds" value="#{NotificationBean.getNotifications()}" var="notif" scrollHeight="353" mode="inline">
                            <h:panelGrid columns="3" columnClasses="logo,detail" style="width:100%;border-style:solid;border-width:1px; border-bottom: thin" >
                                <p:outputPanel>                                   
                                    <div align="center">
                                        <p:spacer width="15" height="10"/>
                                        <p:graphicImage value="/images/#{notif.type}-icon.png" style="width:40px;height:40px;  "/>
                                    </div>
                                </p:outputPanel>

                                <p:outputPanel>
                                    <h:panelGrid columns="1" cellpadding="1" style="text-indent:20px">
                                        <h:outputText value="Notification for the event:" style="color:#000066;font-size:14px;font-family:calibri;"/>
                                        <h:outputText value="#{notif.eventID.name}" style="color:#000066;font-size:18px;font-family:calibri;font-weight:bold;" />
                                        <h:outputText value="#{notif.getFormatDate()} at #{notif.getFormatHour()}" style="color:#000066;font-size:11px;font-family:calibri;"/>                        
                                    </h:panelGrid>                                    
                                </p:outputPanel>

                                <p:outputPanel>                                     
                                    <p:commandButton value="Get details" process="@this" update=":invdlg, :fi:tableInvitesInfo, :modifdlg, :deldlg, :newdaydlg, :badweatherdlg "
                                                     style="width:150px;height:35px;color:#000066;font-size:17px;font-family:calibri;">
                                        <f:setPropertyActionListener value="#{notif}" target="#{NotificationBean.selectedNotification}"/>

                                    </p:commandButton> 
                                </p:outputPanel>                             
                            </h:panelGrid>                                           
                        </p:dataScroller>
                    </h:form>
                </p:dialog>

                <!-- Dialog per accettazione/rifiuto nuovo invito -->
                <p:dialog id="invdlg" widgetVar="invitationDialog" header="Invitation details" width="580" height="535" resizable="false"
                          style="background-color:aliceblue;" showEffect="drop" hideEffect="clip" appendTo="@(body)">
                    <h:form>           
                        <div align="center"> 
                            <h:outputText id="head" value="#{userBean.username}, there's a new invitation for you!" 
                                          style="font-size:20px;font-family:calibri;font-weight:bold;color:#000066"/><p:spacer width="20" height="30"/>
                            <p:graphicImage value="/images/invitation-icon.png" style="width:35px;height:35px" /><br/><br/>
                        </div>    
                        <h:panelGrid id="invitationDetail" columns="2" cellspacing="10" style="font-family:calibri;color:#000066">
                            <h:outputText value="Event: " style="font-weight:bold;margin-left: 30px"/>
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.name}" />

                            <h:outputText value="Organizer: " style="font-weight:bold;margin-left: 30px"/>
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.organizerID.username}" />                                

                            <h:outputText value="Start: " style="font-weight:bold;margin-left: 30px"/>
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.formatStartDate} 
                                          at #{NotificationBean.selectedNotification.eventID.formatStartHour}" />

                            <h:outputText value="End: " style="font-weight:bold;margin-left: 30px" />
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.formatEndDate} 
                                          at #{NotificationBean.selectedNotification.eventID.formatEndHour}"/>          

                            <h:outputText value="City: " style="font-weight:bold;margin-left: 30px"/>
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.city}"/>

                            <h:outputText value="Address: " style="font-weight:bold;margin-left: 30px"/>
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.address}"/>

                            <h:outputText value="Type: " style="font-weight:bold;margin-left: 30px"/>
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.type}"/>

                            <h:outputText value="Description: " style="font-weight:bold;margin-left: 30px"
                                          rendered="#{not NotificationBean.selectedNotification.eventID.description eq ''}" />
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.description}"
                                          rendered="#{not NotificationBean.selectedNotification.eventID.description eq ''}"/>

                            <h:outputText value="Invites:" style="font-weight:bold;margin-left: 30px"/> 
                            <p:autoComplete id="searchUser" value="#{NotificationBean.selectedNotification.eventID.getInvitedUsers()}"
                                            var="user" 
                                            itemLabel="#{user.username}" itemValue="#{user}"
                                            converter="userConverter"
                                            multiple="true"
                                            disabled="true"
                                            emptyMessage="No users to suggest.">  
                            </p:autoComplete>
                            <div align="right">
                                <p:commandButton id="showInvites" value="Show invites" update="searchUser" oncomplete="PF('invitesInfoDialog').show();"
                                                 disabled="#{NotificationBean.selectedNotification.eventID.getInvitedUsers().size() eq 0}"
                                                 style="font-family:calibri;color:#000066;width:140px;"/>                           
                            </div>
                        </h:panelGrid>
                        <h:panelGrid  id="invitationButtons" columns="3" cellspacing="20" style="font-family:calibri;color:#000066">                          
                            
                            <p:commandButton value="Decide later" onclick="PF('invitationDialog').hide()" style="font-family:calibri;color:#000066;width:140px;"
                                             rendered="#{not NotificationBean.alreadyDecided()}"/>
                            
                            <p:commandButton value="Decline" actionListener="#{NotificationBean.declineInvitation}" style="font-family:calibri;color:#000066;width:140px;"
                                             oncomplete="PF('invitationDialog').hide();PF('confirmDecline').show();"
                                             icon="ui-icon-closethick" disabled="#{NotificationBean.alreadyDecided()}"/>
                            
                            <p:commandButton value="Accept" actionListener="#{NotificationBean.acceptInvitation}" style="font-family:calibri;color:#000066;width:140px;"
                                            oncomplete="PF('myschedule').update();PF('invitationDialog').hide();PF('confirmAccept').show();"
                                             icon="ui-icon-check" disabled="#{NotificationBean.alreadyAccepted()}"/>                            

                        </h:panelGrid> 
                    </h:form>
                </p:dialog> 

                <!-- Dialog della lista di invitati -->
                <p:dialog widgetVar="invitesInfoDialog" header="List of invited users" showEffect="clip" hideEffect="clip"
                          width="450" height="200" style="background-color: aliceblue" appendTo="@(body)" resizable="true">
                    <h:form id="fi">
                        <p:dataTable id="tableInvitesInfo" var="u" value="#{NotificationBean.selectedNotification.eventID.getInvitedUsers()}">              
                            <p:column style="width:60%;text-align:center">
                                <f:facet name="header">
                                    <h:outputText value="User" />
                                </f:facet>
                                <h:outputText value="#{u.username} - #{u.email}" />
                            </p:column>
                            <p:column style="width:40%;text-align:center">
                                <f:facet name="header">
                                    <h:outputText value="will participate" />
                                </f:facet>
                                <p:graphicImage value="/images/#{NotificationBean.checkParticipation(u)}-icon.png" 
                                                style="width:35px;height:35px"/>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </p:dialog>

                <!-- Dialog conferma accettazione invito -->
                <p:confirmDialog widgetVar="confirmAccept" message="You have successfully joined the event!"
                                 header="Acceptance confirmation" appendTo="@(body)"
                                 style="background-color:aliceblue">
                    <div align="center">
                        <p:commandButton value="OK" onclick="PF('confirmAccept').hide()"/>
                    </div>
                </p:confirmDialog>

                <!-- Dialog conferma rifiuto invito -->
                <p:confirmDialog widgetVar="confirmDecline" message="Remember, you can change your choice at any time."
                                 header="Declination confirmation" appendTo="@(body)"
                                 style="background-color:aliceblue">
                    <div align="center">
                        <p:commandButton value="OK" onclick="PF('confirmDecline').hide()"/>
                    </div>
                </p:confirmDialog>

                <!-- Modification dialog -->
                <p:dialog id="modifdlg" widgetVar="modificationDialog" width="450" height="270" header="Modification details" resizable="false"
                          style="background-color:aliceblue;" showEffect="drop" hideEffect="clip" appendTo="@(body)">
                    <div align="left"><p:graphicImage value="/images/modification-icon.png" style="width:35px;height:35px" /></div>
                    <p:outputPanel id="modificationDetail" style="font-family:calibri;color:#000066">
                        <h:outputText value="The organizer #{NotificationBean.selectedNotification.eventID.organizerID.username} 
                                      changed some information about the event "/>
                        <h:outputText value="#{NotificationBean.selectedNotification.eventID.name}." style="font-weight:bold"/>
                        <h:outputText value=" Check them out!"/>
                    </p:outputPanel> 
                    <h:panelGrid columns="2" cellspacing="10" style="font-family:calibri;color:#000066">                                                                                
                        <h:outputText value="Start hour: " style="font-weight:bold"/>
                        <h:outputText value="#{NotificationBean.selectedNotification.eventID.formatStartDate} 
                                      at #{NotificationBean.selectedNotification.eventID.formatStartHour}" />

                        <h:outputText value="End hour: " style="font-weight:bold" />
                        <h:outputText value="#{NotificationBean.selectedNotification.eventID.formatEndDate} 
                                      at #{NotificationBean.selectedNotification.eventID.formatEndHour}"/>

                        <h:outputText value="Place: " style="font-weight:bold" />
                        <h:outputText value="#{NotificationBean.selectedNotification.eventID.address},
                                      #{NotificationBean.selectedNotification.eventID.city}"/>                               
                    </h:panelGrid><br/>
                    <div align="center">
                        <p:commandButton value="OK" oncomplete="PF('modificationDialog').hide()" style="font-family:calibri;color:#000066"/>
                    </div>                       
                </p:dialog>

                <!-- Deletion dialog -->
                <p:dialog id="deldlg" widgetVar="deletionDialog" width="450" height="150" header="Deletion details" resizable="false"
                          style="background-color:aliceblue;" showEffect="drop" hideEffect="clip" appendTo="@(body)">
                    <div align="left"><p:graphicImage value="/images/deletion-icon.png" style="width:35px;height:35px" /></div>
                    <p:outputPanel id="deletionDetail" style="font-family:calibri;color:#000066">
                        <h:outputText value="The organizer #{NotificationBean.selectedNotification.eventID.organizerID.username} 
                                      decided to delete the event "/>
                        <h:outputText value="#{NotificationBean.selectedNotification.eventID.name}!" style="font-weight:bold" /><br/>
                        <h:outputText value=" The event will not be shown on your calendar anymore."/>
                        <div align="right">
                            <h:outputText value="The MeteoCal staff" style="font-style:italic;"/>
                        </div>
                    </p:outputPanel> <br/>
                    <div align="center">
                        <p:commandButton value="OK" oncomplete="PF('deletionDialog').hide()" style="font-family:calibri;color:#000066"/>
                    </div>
                </p:dialog>
                
                <!-- NewDayProposal dialog -->
                <p:dialog id="newdaydlg" widgetVar="newdayDialog" width="530" height="230" 
                          header="New day proposal for event #{NotificationBean.selectedNotification.eventID.name}"
                          resizable="false" style="background-color:aliceblue;" showEffect="drop" hideEffect="clip" appendTo="@(body)"> 
                    <h:form>
                        <div align="left"><p:graphicImage value="/images/newdayproposal-icon.png" style="width:35px;height:35px" /></div>
                        <p:outputPanel id="proposalDetail" style="font-family:calibri;color:#000066">
                            <h:outputText value="#{userBean.username}, our forecast service expects "/> 
                            <h:outputText value="bad weather " style="font-weight:bold"/>   <!---->
                            <h:outputText value="(#{NotificationBean.selectedNotification.eventID.weather}, #{NotificationBean.selectedNotification.eventID.temperature} °C)     
                                                 on #{NotificationBean.selectedNotification.eventID.getFormatStartDate()}. 
                                                 The closest good weather conditions are expected on #{NotificationBean.selectedNotification.getFormatProposedDate()}. Do you want to change the schedule for the event "/> 
                            <h:outputText value="#{NotificationBean.selectedNotification.eventID.name} " style="font-weight:bold"/>
                            <h:outputText value="to this new date?"/> <br/>
                            <div>
                                <h:outputText value="The MeteoCal staff" style="font-style:italic;position:absolute;right:60px"/>
                            </div>
                        </p:outputPanel>  <br/><br/>
                        <h:panelGrid id="acceptDeclineProposal" columns="2" cellspacing="5" style="position:absolute;left:140px">
                            <p:commandButton value="No" icon="ui-icon-closethick" onclick="PF('newdayDialog').hide()"
                                             style="font-family:calibri;color:#000066;width:120px;"/>
                            <p:commandButton value="Yes, change" icon="ui-icon-check" actionListener="#{NotificationBean.changeEventDates}"
                                             oncomplete="PF('myschedule').update();PF('newdayDialog').hide();PF('confirmNewDay').show();"
                                             style="font-family:calibri;color:#000066;width:160px;"/>
                        </h:panelGrid>
                    </h:form>
                </p:dialog>
                
                <!-- Dialog di conferma del cambiamento di data -->
                <p:confirmDialog widgetVar="confirmNewDay" 
                                 message="The date of the event has been changed to #{NotificationBean.selectedNotification.getFormatProposedDate()}!"
                                 header="Date changed confirmation" appendTo="@(body)"
                                 style="background-color:aliceblue">
                    <div align="center">
                        <p:commandButton value="OK" onclick="PF('confirmNewDay').hide()"/>
                    </div>
                </p:confirmDialog>
                
                <!-- BadWeatherWarning dialog -->
                <p:dialog id="badweatherdlg" widgetVar="badweatherDialog" width="510" height="200" 
                          header="Bad weather warning for #{NotificationBean.selectedNotification.eventID.name}"
                          resizable="false" style="background-color:aliceblue;" showEffect="drop" hideEffect="clip" appendTo="@(body)"> 
                    <div align="left"><p:graphicImage value="/images/badweather-icon.png" style="width:35px;height:35px" /></div>
                    <p:outputPanel id="badweatherDetail" style="font-family:calibri;color:#000066">
                        <h:outputText value="#{userBean.username}, our forecast service expects "/>
                        <h:outputText value="bad weather " style="font-weight:bold"/>        
                        <h:outputText value="(#{NotificationBean.selectedNotification.eventID.weather}, #{NotificationBean.selectedNotification.eventID.temperature} °C)   
                                      for the event "/>
                        <h:outputText value="#{NotificationBean.selectedNotification.eventID.name}" style="font-weight:bold"/>
                        <h:outputText value=", which will take place tomorrow #{NotificationBean.selectedNotification.eventID.getFormatStartDate()}."/>
                        <div>
                            <h:outputText value="The MeteoCal staff" style="font-style:italic;position:absolute;right:60px"/>
                        </div>
                    </p:outputPanel> <br/><br/> 
                    <div align="center">
                        <p:commandButton value="OK, good to know" onclick="PF('badweatherDialog').hide()"
                                         style="font-family:calibri;color:#000066;width:170px;"/>
                    </div>
                </p:dialog>                
                
            </p:layoutUnit>

            <!-- WESTERN LAYOUT UNIT -->
            <p:layoutUnit position="west" size="270">

                <h:form>
                    <h:outputLabel style="font-family:calibri;color:#000066;font-size:20px;position:absolute;top:250px;left:45px" for="calVisibility" value="Calendar visibility" />
                    <p:selectOneMenu id="calVisibility" value="#{ScheduleView.user.calendarVisibility}" 
                                     style="width:160px;height:30px;position:absolute;top:290px;left:40px" >
                        <p:ajax event="valueChange" listener="#{ScheduleView.changeCalendarVisibility()}"/>
                        <f:selectItem itemLabel="public" itemValue="public" />
                        <f:selectItem itemLabel="private" itemValue="private" />
                    </p:selectOneMenu>
                </h:form>  

                <h:form>
                    <p:commandButton id="newEvent" type="button" value="New Event" onclick="PF('eventDialog').show();"
                                     style="width:160px;height:40px;font-family:calibri;color:#000066;font-size:20px;position:absolute;top:360px;left:40px;">
                        <p:ajax update=":fc:eventDetails,:fc:eventButtons,:fc:tableInvites,:fc:showInvites" resetValues="true" listener="#{ScheduleView.initializeDialog}" />
                    </p:commandButton>
                </h:form>

                <h:form>
                    <p:commandButton id="profile" value="My profile" onclick="PF('profileDialog').show();"
                                     style="width:160px;height:40px;font-family:calibri;color:#000066;font-size:20px;position:absolute;top:430px;left:40px;"/>
                    <p:dialog id="profileDlg" header="My profile info" widgetVar="profileDialog" showEffect="clip" hideEffect="clip"
                              resizable="false" appendTo="@(body)" style="width:400px;height:400px;background-color: aliceblue">
                        <div align="center">
                            <p:graphicImage value="/images/user-icon.png" style="width:200px;height:200px"/>
                        </div>

                        <p:panel>
                            <div>
                                <h:outputText value="Username: " style="font-family:calibri;font-weight:bold;color:#000066;font-size:20px;"/>
                                <h:outputText value="#{userBean.username}" style="font-family:calibri;color:#000066;font-size:20px;"/>
                            </div>
                            <div>
                                <h:outputText value="Email: " style="font-family:calibri;font-weight:bold;color:#000066;font-size:20px;"/>
                                <h:outputText value="#{userBean.email}" style="font-family:calibri;color:#000066;font-size:20px;"/>
                            </div>
                        </p:panel>

                    </p:dialog>
                </h:form>

                <h:form>
                    <p:commandButton id="logout" value="Logout" action="#{loginBean.logout()}" 
                                     style="width:160px;height:40px;font-family:calibri;color:#000066;font-size:20px;position:absolute;top:500px;left:40px;"/>         
                </h:form>            

                <h:form>
                    <p:calendar value="#{ScheduleView.date}" mode="inline" readonly="true"
                                style="width:100px;height:40px;font-family:calibri;color:#000066;font-size:14px;position:absolute;top:20px;left:8px;"/>                
                </h:form>

            </p:layoutUnit>

            <!-- CENTRAL LAYOUT UNIT -->
            <p:layoutUnit position="center" header="My Calendar" >          
                <h:body>  
                    <h:form id="fc"> 
                        <p:growl id="messages" showDetail="true" /> 

                        <h:panelGrid columnClasses="value">
                            <h3 style="margin-top: 0;position:absolute;top:600px"/>
                            <p:schedule id="schedule" value="#{ScheduleView.eventModel}" widgetVar="myschedule" 
                                        view="agendaWeek" timeZone="GMT+1" aspectRatio="2" rightHeaderTemplate="null"
                                        slotMinutes="15" firstHour="8" axisFormat="H:00" allDaySlot="false" 
                                        draggable="false" resizable="false" timeFormat="HH:mm{ - HH:mm}" 
                                        style="background-color: aliceblue; font-family:calibri; color: #000066;
                                        width: 1050px; height: 560px;">

                                <p:ajax event="eventSelect" listener="#{ScheduleView.onEventSelect}" 
                                        update="eventDetails,eventButtons,tableInvites,showInvites" 
                                        oncomplete="PF('eventDialog').show();" />

                            </p:schedule>
                        </h:panelGrid>

                        <p:dialog id="dd" widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip"
                                  width="630" height="580" resizable="false" style="background-color: aliceblue">
                          <!--  <p:ajax event="close" update="eventDetails,eventButtons,tableInvites" resetValues="true" listener="" /> 
                                  messo sopra in commandButton NewEvent -->
                            <h:panelGrid id="eventDetails" columns="2" cellspacing="5" style="font-family:calibri;color:#000066;">
                                <h:outputLabel for="title" value="Name: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:inputText id="title" value="#{ScheduleView.event.name}" required="true"
                                             readonly="#{ScheduleView.NotOrganizer()}"/>             

                                <h:outputLabel for="startHour" value="Start: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:calendar id="startHour" value="#{ScheduleView.event.startHour}" 
                                            pattern="dd/MM/yyyy HH:mm" timeZone="GMT+1" required="true" 
                                            disabled="#{ScheduleView.NotOrganizer()}"/> 

                                <h:outputLabel for="endHour" value="End: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:calendar id="endHour" value="#{ScheduleView.event.endHour}" 
                                            pattern="dd/MM/yyyy HH:mm" timeZone="GMT+1" required="true" 
                                            disabled="#{ScheduleView.NotOrganizer()}"/> 

                                <h:outputLabel for="city" value="City: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:inputText id="city" value="#{ScheduleView.event.city}" required="true" 
                                             readonly="#{ScheduleView.NotOrganizer()}">
                                    <p:tooltip for="city" value="Examples: 'London, UK', 'Rome, IT'"/>
                                </p:inputText>

                                <h:outputLabel for="address" value="Address: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:inputText id="address" value="#{ScheduleView.event.address}" required="true" 
                                             readonly="#{ScheduleView.NotOrganizer()}"/>            

                                <h:outputLabel for="type" value="Type: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:selectOneMenu id="type" required="true" value="#{ScheduleView.event.type}"
                                                 style="width:160px;height:30px;" disabled="#{ScheduleView.NotOrganizer()}"> 
                                    <f:selectItem itemLabel="outdoor" itemValue="outdoor" />
                                    <f:selectItem itemLabel="indoor" itemValue="indoor" />
                                </p:selectOneMenu>

                                <h:outputLabel for="visibility" value="Visibility: *" style="font-weight:bold;margin-left: 30px"/>
                                <p:selectOneMenu id="visibility" required="true" value="#{ScheduleView.event.visibility}"
                                                 style="width:160px;height:30px;" disabled="#{ScheduleView.NotOrganizer()}">
                                    <f:selectItem itemLabel="public" itemValue="public" />
                                    <f:selectItem itemLabel="private" itemValue="private" />
                                </p:selectOneMenu>

                                <h:outputLabel for="description" value="Description:" style="font-weight:bold;margin-left: 30px"/>
                                <p:inputTextarea id="description" autoResize="false" style="width:280px;height:40px;" value="#{ScheduleView.event.description}"
                                                 readonly="#{ScheduleView.NotOrganizer()}"/>

                                <h:outputLabel for="organizer" value="Organizer:" style="font-weight:bold;margin-left: 30px"/>
                                <p:inputText id="organizer" value="#{ScheduleView.event.organizerID.username} - #{ScheduleView.event.organizerID.email}" 
                                             readonly="true"/>

                                <h:outputLabel for="searchUser" value="Invites:" style="font-weight:bold;margin-left: 30px"/> 
                                <p:autoComplete id="searchUser" value="#{InviteUserBean.selectedUsers}"
                                                completeMethod="#{InviteUserBean.completeUsers}" 
                                                var="user" 
                                                itemLabel="#{user.username}" itemValue="#{user}"
                                                converter="userConverter"
                                                onchange="#{InviteUserBean.selectedUsers}"
                                                multiple="true"
                                                disabled="#{ScheduleView.NotOrganizer()}"
                                                emptyMessage="No users to suggest.">  

                                    <p:ajax event="itemSelect" update="tableInvites"/>
                                    <p:ajax event="itemUnselect" update="tableInvites"/>

                                    <p:column style="width:5%;text-align:center">
                                        <p:graphicImage value="/images/user.png" style="width:35px;height:35px" />
                                    </p:column>
                                    <p:column style="width:95%;height:20px;text-align:center">
                                        #{user.username} - #{user.email} 
                                    </p:column>
                                </p:autoComplete>
                                <p:watermark for="searchUser" value="Search user" />        
                            </h:panelGrid>
                            <div align="left">
                                <p:commandButton id="showInvites" value="Show invites" disabled="#{InviteUserBean.selectedUsers.size() eq 0}"
                                                 style="font-family:calibri;color:#000066;width:180px;font-size:20px;left:130px"
                                                 update="searchUser" oncomplete="PF('invitesDialog').show();"/> 
                             </div>                           
                            <h:panelGrid id="eventButtons" columns="3" cellspacing="30" style="font-family:calibri;color:#000066;position:absolute;left:120px">           
                                <p:commandButton id="delButton" value="Delete" actionListener="#{ScheduleView.deleteEventInCalendar}" 
                                                 oncomplete="PF('myschedule').update();PF('eventDialog').hide();"
                                                 style="font-family:calibri;color:#000066;width:180px;height:40px;font-size:20px"
                                                 rendered="#{not ScheduleView.NotOrganizer()}"/>

                                <p:commandButton id="addButton" value="Save" update="eventDetails" actionListener="#{ScheduleView.showEventInCalendar}" 
                                                 oncomplete="PF('myschedule').update();PF('eventDialog').hide();"
                                                 style="font-family:calibri;color:#000066;width:180px;height:40px;font-size:20px"
                                                 rendered="#{not ScheduleView.NotOrganizer()}"/>  
                                
                                <p:commandButton id="declineButton" value="Decline" update="eventDetails" actionListener="#{ScheduleView.dontShowEventInCalendar}" 
                                                 oncomplete="PF('myschedule').update();PF('eventDialog').hide();"
                                                 style="font-family:calibri;color:#000066;width:180px;height:40px;font-size:20px"
                                                 rendered="#{ScheduleView.NotOrganizer()}"/>                                 
                            </h:panelGrid>       
                        </p:dialog> 
                        <!--</h:form>-->

                        <!--<h:form>-->
                        <p:dialog widgetVar="invitesDialog" header="List of invited users" showEffect="clip" hideEffect="clip"
                                  width="450" height="200" style="background-color: aliceblue" resizable="true">
                            <p:dataTable id="tableInvites" var="u" value="#{InviteUserBean.selectedUsers}">              
                                <p:column style="width:60%;text-align:center">
                                    <f:facet name="header">
                                        <h:outputText value="User" />
                                    </f:facet>
                                    <h:outputText value="#{u.username} - #{u.email}" />
                                </p:column>
                                <p:column style="width:40%;text-align:center">
                                    <f:facet name="header">
                                        <h:outputText value="will participate" />
                                    </f:facet>
                                    <p:graphicImage value="/images/#{ScheduleView.checkParticipation(u)}-icon.png"
                                                    style="width:35px;height:35px"/>
                                </p:column>
                            </p:dataTable>   
                        </p:dialog> 
                    </h:form>


                    <!--<h:form>          
                        <p:confirmDialog widgetVar="confirmDelete" message="Are you sure about deleting this event?"
                                         header="Delete event confirmation" severity="alert" appendTo="@(body)"
                                         style="background-color: aliceblue">
                            <p:commandButton style="margin-left: 30px; width: 90px; height: 40px" value="Yes" 
                                             oncomplete="PF('myschedule').update();PF('eventDialog').hide();PF('confirmDelete').hide()"/>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <p:commandButton style="margin-right: 30px; width: 90px; height: 40px" value="No" onclick="PF('confirmDelete').hide();" type="button" />
                        </p:confirmDialog>
                    </h:form>
                    
                    <h:form>
                    <p:confirmDialog widgetVar="confirmSave" message="Event saved successfully!"
                                     header="Save event confirmation" style="background-color: aliceblue">
                        <div align="center">
                        <p:commandButton value="OK" onclick="PF('eventDialog').hide();PF('confirmSave').hide()"/>
                        </div>
                    </p:confirmDialog>
                    </h:form>-->

                </h:body>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

